<extend name="Base/common"/>

<block name="style">
<link rel="stylesheet" href="__UNIFY__/plugins/revolution-slider/rs-plugin/css/settings.css" type="text/css" media="screen">
<link rel="stylesheet" href="__UNIFY__/plugins/flexslider/flexslider.css">     
<link rel="stylesheet" href="__UNIFY__/plugins/bxslider/jquery.bxslider.css">
<link rel="stylesheet" href="__UNIFY__/plugins/fancybox/source/jquery.fancybox.css"> 
<link rel="stylesheet" href="__UNIFY__/css/pages/page_one.css">

</block>
<block name="topmenus">
     <think:nav name="nav">
     	<eq name="nav.pid" value="0">
         <li <if condition="$nav.title eq '首页'">class="active"</if>>
             <a href="{$nav.url|get_nav_url}" target="<eq name='nav.target' value='1'>_blank<else/>_self</eq>">{$nav.title}</a>
         </li>
         </eq>
     </think:nav>
     <!-- <li class="dropdown mega-menu-fullwidth">
         <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
           	  系统菜单
         </a>
         <ul class="dropdown-menu">
             <li>
                 <div class="mega-menu-content disable-icons">
                     <div class="container">
                         <div class="row equal-height">
                             <div class="col-md-3 equal-height-in">
                                 <ul class="list-unstyled equal-height-list">
                                     <li><h3>图文管理</h3></li>
                                     <li><a href="{:U('Pictures/index')}"><i class="fa fa-sort-alpha-asc"></i> 图片管理</a></li>
                                     <li><a href="{:U('Pictures/index')}"><i class="fa fa-sort-alpha-asc"></i> 图片管理</a></li>
                                     <li><a href="{:U('Pictures/index')}"><i class="fa fa-sort-alpha-asc"></i> 图片管理</a></li>
                                 </ul>
                             </div>
                         </div>
                     </div>    
                 </div>    
             </li>
         </ul>
     </li> -->
</block>
<block name="body">
	    
    <div class="tp-banner-container">
        <div class="tp-banner">
            <ul>
	            <volist name="_pictures" id="pics">
		  			<li class="revolution-mch-1" data-transition="fade" data-slotamount="5" data-masterspeed="1000" data-title="{$pics.name}">
	                    <img src="__ROOT__{$pics.path}"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
	                    <div class="tp-caption revolution-ch1 sft start"
	                        data-x="center" data-hoffset="0" data-y="100" data-speed="1500" data-start="500"
	                        data-easing="Back.easeInOut" data-endeasing="Power1.easeIn" data-endspeed="300">
	                        {$pics.name}
	                    </div>
	                    <div class="tp-caption revolution-ch2 sft"
	                        data-x="center" data-hoffset="0" data-y="190" data-speed="1400" data-start="2000"
	                        data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn"
	                        data-captionhidden="off" style="z-index: 6">
	                        {$pics.description}
	                    </div>
	                    <div class="tp-caption sft"
	                        data-x="center" data-hoffset="0" data-y="310" data-speed="1600" data-start="2800"
	                        data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn"
	                        data-captionhidden="off" style="z-index: 6">
	                        <a href="{$pics.pageurl}" class="btn-u btn-brd btn-brd-hover btn-u-light">进入了解</a>
	                    </div>
	                </li>
				</volist>
            </ul>
            <div class="tp-bannertimer tp-bottom"></div>            
        </div>
    </div>
    <!--=== Purchase Block ===-->
    <div class="purchase">
        <div class="container">
            <div class="row">
                <div class="col-md-9 animated fadeInLeft">
                    <span>CRU云起 轻量级/响应式HTML5模板.</span>
                    <p>CRU云起致力于前端开发推广，坚持分享、开放的互联网精神，旨在为广大前端攻城师、设计师提供交流的平台，如果你和我们有相同的目标，我们乐意一起携手前行。</p>
                </div>            
                <div class="col-md-3 btn-buy animated fadeInRight">
                    <a href="#" class="btn-u btn-u-lg"><i class="fa fa-cloud-download"></i> 立即下载</a>
                </div>
            </div>
        </div>
    </div><!--/row-->
   

    <!--=== Content Part ===-->
    <div class="container content-sm">
    	<!-- Service Blocks -->
    	<div class="row margin-bottom-30">
        	<div class="col-md-4">
        		<div class="service">
                    <i class="fa fa-compress service-icon"></i>
        			<div class="desc">
        				<h4>完全响应式</h4>
                        <p>响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。目前越来越多的设计师采用这个技术。</p>
        			</div>
        		</div>	
        	</div>
        	<div class="col-md-4">
        		<div class="service">
                    <i class="fa fa-cogs service-icon"></i>
        			<div class="desc">
        				<h4>HTML5 + CSS3</h4>
                        <p>HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先需要大力气才能达到的效果可以轻松修改。</p>
        			</div>
        		</div>	
        	</div>
        	<div class="col-md-4">
        		<div class="service">
                    <i class="fa fa-rocket service-icon"></i>
        			<div class="desc">
        				<h4>前期工作</h4>
                        <p>如果你也热爱前端开发、热爱软件开发，有一颗创业的心，欢迎和我们联系，更欢迎你加入我们的团队！</p>
        			</div>
        		</div>	
        	</div>			    
    	</div>
    	<!-- End Service Blokcs -->

    	<!-- Recent Works -->
        <div class="headline"><h2>近期项目</h2></div>
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                	<div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img class="img-responsive" src="__UNIFY__/img/main/img1.jpg" alt="">
                        </div>
                        <a class="btn-more hover-effect" href="#">更多 +</a>					
                    </div>
                    <div class="caption">
                        <h3><a class="hover-effect" href="#">项目 One</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img class="img-responsive" src="__UNIFY__/img/main/img12.jpg" alt="">
                        </div>
                        <a class="btn-more hover-effect" href="#">更多 +</a>                   
                    </div>
                    <div class="caption">
                        <h3><a class="hover-effect" href="#">项目 Two</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img class="img-responsive" src="__UNIFY__/img/main/img3.jpg" alt="">
                        </div>
                        <a class="btn-more hover-effect" href="#">更多 +</a>                   
                    </div>
                    <div class="caption">
                        <h3><a class="hover-effect" href="#">项目 Three</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">
                            <img class="img-responsive" src="__UNIFY__/img/main/img17.jpg" alt="">
                        </div>
                        <a class="btn-more hover-effect" href="#">更多 +</a>                   
                    </div>
                    <div class="caption">
                        <h3><a class="hover-effect" href="#">项目 Four</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="one-page">
        <div class="flat-bg-block-v1 parallaxBg1">
            <div class="container">
                <div class="row">
                    <div class="col-md-7">
                        <div class="headline-left ">
                            <h2 class="headline-brd">完美响应</h2>
                            <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
                        </div><!--/end Headline Left-->
                        
                        <div class="row">   
                            <div class="col-sm-5">
                                <ul class="list-unstyled checked-list">
                                    <li><i class="fa fa-check"></i> 让页面元素“固定”位置</li>
                                    <li><i class="fa fa-check"></i> 响应式导航</li>
                                    <li><i class="fa fa-check"></i> jQuery轮播插件</li>
                                    <li><i class="fa fa-check"></i> 非常酷的弹框(Alert)组件</li>
                                </ul>
                            </div>     
                            <div class="col-sm-5 col-sm-offset-1">
                                <ul class="list-unstyled checked-list">
                                    <li><i class="fa fa-check"></i> 专业的前端模版</li>
                                    <li><i class="fa fa-check"></i> Web安全色</li>
                                    <li><i class="fa fa-check"></i> 气泡形状的提示（Tooltip）控件</li>
                                    <li><i class="fa fa-check"></i> 纯CSS实现的Icon</li>
                                </ul>
                            </div>    
                        </div>
                    </div>
                    <div class="col-md-5">
                        <img class="img-over img-responsive" src="__UNIFY__/img/mockup/2.png" alt="">
                    </div>
                </div>        
            </div><!--/end container-->
        </div>
    </div>
    <div class="container content-sm">
    	<!-- Info Blokcs -->
    	<div class="row">
        	<!-- Welcome Block -->
    		<div class="col-md-8 md-margin-bottom-40">
    			<div class="headline"><h2>欢迎来到</h2></div>
                <div class="row">
                    <div class="col-sm-4">
                        <img class="img-responsive margin-bottom-20" src="__UNIFY__/img/main/img18.jpg" alt="">
                    </div>
                    <div class="col-sm-8">
                        <p>CRU云起 是一个非常炫酷的响应引导模板的企业和创意。它可以在所有主要的网络浏览器，平板电脑和手机上工作。</p>
                        <ul class="list-unstyled margin-bottom-20">
                            <li><i class="fa fa-check color-green"></i> 协调性/创造性</li>
                            <li><i class="fa fa-check color-green"></i> 响应式html5模板</li>
                        </ul>                    
                    </div>
                </div>
 
            </div><!--/col-md-8-->        

            <!-- Latest Shots -->
            <div class="col-md-4">
    			<div class="headline"><h2>最新动态</h2></div>
    			<div id="myCarousel" class="carousel slide carousel-v1">
                    <div class="carousel-inner">
	                    <volist name="_pictures" id="pics">
			                <div class="item <eq name='pics.rownum' value='0'>active</eq>">
	                            <img src="__ROOT__{$pics.path}" alt="{$pics.name}">
	                            <div class="carousel-caption">
	                                <p>{$pics.description}</p>
	                            </div>
	                        </div>
						</volist>
                    </div>
                    <div class="carousel-arrow">
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <i class="fa fa-angle-left"></i>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>
    			</div>
            </div><!--/col-md-4-->
    	</div>	
    	<!-- End Info Blokcs -->

        <!-- Owl Clients v1 -->
        <div class="headline"><h2>功勋章篇</h2></div>        
        <div class="owl-clients-v1">
            <div class="item">
                <img src="__UNIFY__/img/clients4/1.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/2.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/3.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/4.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/5.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/6.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/7.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/8.png" alt="">
            </div>
            <div class="item">
                <img src="__UNIFY__/img/clients4/9.png" alt="">
            </div>
        </div>
    </div><!--/container-->
        <!--=== Call To Action v2 ===-->
    <div class="call-action-v2 parallaxBg">
        <div class="container">
            <h2>关注网站的注意啦!</h2>
            <p>本网站现在向全社会广泛采纳意见，请来的朋友，一定要留下您的足迹，留下您的美言佳句，或者吐槽调侃，不胜感激。</p>
            <a href="#" class="btn-u">请您留言</a>
            <a href="#" class="btn-u">浏览留言</a>
        </div>
    </div>
</block>

<block name="script">
	<script src="__VIEW__/default/common.js"></script> 
	<!-- JS Implementing Plugins -->           
	<script type="text/javascript" src="__UNIFY__/plugins/flexslider/jquery.flexslider-min.js"></script>
	<script type="text/javascript" src="__UNIFY__/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
	<script type="text/javascript" src="__UNIFY__/plugins/revolution-slider/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
	<script type="text/javascript" src="__UNIFY__/plugins/revolution-slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
	<!-- JS Page Level -->           
	<script type="text/javascript" src="__UNIFY__/js/plugins/fancy-box.js"></script>
	<script type="text/javascript" src="__UNIFY__/js/plugins/revolution-slider.js"></script>
	<script type="text/javascript">
	    jQuery(document).ready(function() {
	        FancyBox.initFancybox();
	        RevolutionSlider.initRSfullWidth();
	        OwlCarousel.initOwlCarousel();        
	        ParallaxSlider.initParallaxSlider();
	    });
	</script>
</script>
</block>